Директива - це атрибут HTML тега який починається з префікса "v-". Це зробленою з метою щоб не було сутичок з іншими фреймворками.
| Директиви | Скорочення | Призначення | Приклад синтаксису |
|---|---|---|---|
| v-text | керує текстовим вмістом елемента | <div id="example" v-text="name"></div> | |
| v-html | керує HTML вмістом елемента | <div id="example" v-html="name"></div> | |
| v-show | керує стилем елемента display | <div id="example" v-show="true"></div> | |
| v-if | перевіряє умову | <div id="example" v-if="true"></div> | |
| v-else | не виконалась умова | <div id="example"><span v-if="true">Умова виконалася</span><span v-else>умова не виконалася</span></div> | |
| v-else-if | якщо не виконалась умова тоді перевіряє іншу умову | <div id="example">
<span v-if="1>2">Умова виконалася</span>
<span v-else-if="1<0">умова не виконалася перевіряємо нову умову</span>
<span v-else-if="1==1">умова не виконалася перевіряємо нову умову</span></div>
| |
| v-for | цикл відображення елементів | <div id="example"><span v-for="li in list"></span></div> | |
| v-on | @ | подія елемента | <div id="example"><span v-on:event="function"></span></div> |
| v-bind | : | пов'язує атрибут елемента з вказаним значенням | <div id="example"><span v-bind:name="value"></span></div> |
| v-model | пов'язує елемент для введення даних з вказаною змінною | <div id="example"><span v-model="name"></span></div> | |
| v-slot | вказує слоти | <div id="example"><span v-model="name"></span></div> | |
| v-pre | не компілює вказаний тег | <div id="example"><span v-pre></span></div> | |
| v-cloak | не показує тег поки немає даних | <div id="example"><span v-cloak></span></div> | |
| v-once | малює елемент лише один раз при компіляції компонента | <div id="example"><span v-once></span></div> |